<template>
	<div class="admin-nav" v-loading="loading">
		<div class="admin-head-nav">
			<div class="head-nav-flex">
				<div class="logo-box">
					<div class="logo" style="background-image:url('/images/logo-ico.png')"></div>
					<div class="title">猿脉总后台管理系统<span class="version">V 7.0</span></div>
				</div>
				<div class="col e-p-r-10">
					<div class="flex align-items-center">
						<el-badge :value="remindCount" slot="reference" :max="99">
							<el-button icon="el-icon-bell" circle size="mini" @click="goRemind"></el-button>
						</el-badge>
					</div>
				</div>
				<div class="col">
					<el-menu :default-active="headActiveIndex" mode="horizontal" @select="headHandleSelect">
						<el-submenu index="3">
							<template slot="title">
								<el-avatar style="margin-right: 10px;" :size="26"
									:src="adminInfo.photo == '' ? 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' : adminInfo.photo">
								</el-avatar>
								<span>{{ adminInfo.name }}</span>
							</template>
							<el-menu-item index="myInfo">我的信息</el-menu-item>
							<el-menu-item index="modifyPwd">修改密码</el-menu-item>
							<el-menu-item index="logout">退出</el-menu-item>
						</el-submenu>
					</el-menu>
				</div>
			</div>
		</div>
		<div class="admin-content">
			<div class="admin-left-nav">
				<el-scrollbar class="text-item" :wrap-class="'text-item-wrap'">
					<el-menu :collapse="isCollapse" :router="true" :default-active="leftActiveIndex"
						@select="leftHandleSelect">
						<template v-for="(item,index) in menu">
							<el-submenu :index="item.active" v-if="item.children">
								<template slot="title">
									<!-- <i :class="item.icon" class="e-font-18 e-icon"></i> -->
									<span>{{item.title}}</span>
								</template>
								<template v-for="(cell,k) in item.children">
									<el-menu-item v-for="(m,i) in cell.list" :key="m.id" :index="m.path"
										:disabled="m.disabled">{{m.name}}</el-menu-item>
								</template>
							</el-submenu>
							<el-menu-item :index="item.path" :disabled="item.disabled" v-else>
								<i :class="item.icon" class="e-font-18 e-icon"></i>
								<span slot="title">{{item.title}}</span>
							</el-menu-item>
						</template>
					</el-menu>
					<i class="collapse-btn" :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"
						@click="isCollapse = !isCollapse"></i>
				</el-scrollbar>
			</div>
			<div class="container-page">
				<el-scrollbar class="text-item" :wrap-class="'text-item-wrap'">
					<nuxt />
				</el-scrollbar>
			</div>
		</div>
		<el-dialog title="管理员信息" :visible.sync="dialogVisible" width="800px">
			<el-descriptions :column="2" border :labelStyle="{ width: '130px' }" title="">
				<!-- <template slot="extra">
					<el-button type="primary" size="small">编辑</el-button>
				</template> -->
				<el-descriptions-item>
					<template slot="label">
						我的名称
					</template>
					{{ my.name }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						性别
					</template>
					{{ my.sex }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						手机号码
					</template>
					{{ my.mobile }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						电子邮箱
					</template>
					{{ my.email }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						状态
					</template>
					{{ my.state }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						头像
					</template>
					<el-image
						style="width: 100px; height: 100px"
						:src="fileURL+my.photo"
						:preview-src-list="[fileURL+my.photo]">
						>
					</el-image>
				</el-descriptions-item>
			</el-descriptions>
		</el-dialog>
		<el-dialog title="修改密码" :visible.sync="dialogVisible2" width="600px" :close-on-click-modal="false">
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
				<el-form-item label="当前密码">
					<el-input v-model="form.curPass"></el-input>
				</el-form-item>
				<el-form-item label="新的密码">
					<el-input v-model="form.newPass"></el-input>
				</el-form-item>
				<el-form-item label="确认密码">
					<el-input v-model="form.againPass"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">确认修改</el-button>
					<el-button @click="dialogVisible2 = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import {
	mapState
} from 'vuex';

export default {
	data() {
		let password = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.form.confirpwd !== '') {
					this.$refs.form.validateField('confirpwd');
				}
				callback();
			}
		};
		let confirpwd = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.form.password) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			menu: [
				{
					title: '运营商',
					icon: 'iconfont icon-feizhi',
					active: 'm1',
					children: [
						{
							itemName: '运营商',
							list: [
								{
									name: '运营商列表',
									disabled: false,
									path:'/admin/operator/list'
								},
							]
						}
					]
				},
				{
					title: '用户库',
					icon: 'iconfont icon-feizhi',
					active: 'm6',
					children: [
						{
							itemName: '用户库',
							list: [
								{
									name: '用户列表',
									disabled: false,
									path:'/admin/user/list'
								},
							]
						}
					]
				},
				{
					title: '新闻公告',
					icon: 'iconfont icon-feizhi',
					active: 'm2',
					children: [
						{
							itemName: '系统设置',
							list: [
								{
									name: '公告列表',
									disabled: false,
									path:'//Notice/list'
								},
								{
									name: '分类设置',
									disabled: false,
									path:'//Notice/type'
								}

							]
						}
					]
				},
				{
					title: '财务管理',
					icon: 'iconfont icon-qianbao1',
					active: 'm3',
					children: [
						{
							itemName: '财务统计',
							list: [
								{
									name: '财务统计',
									disabled: false,
									path:'/admin/finance/statistics'
								}
							]
						},
						{
							itemName: '银行账号',
							list: [
								{
									name: '银行账号',
									disabled: false,
									path:'/admin/bankaccount/list'
								}
							]
						},
						{
							itemName: '提现申请',
							list: [
								{
									name: '提现申请',
									disabled: false,
									path:'/admin/withdrawal/list'
								},
								// {
								// 	name: '提现申请流水',
								// 	disabled: false,
								// 	path:'/finance/withdrawList'
								// }
							]
						},
						{
							itemName: '推广奖励核算',
							list: [
								{
									name: '推广奖励核算',
									disabled: false,
									path:'/admin/finance/commission'
								},

							]
						}
					]
				},
				{
					title: '车辆管理',
					icon: 'iconfont icon-feizhi',
					active: 'm5',
					children: [
						{
							itemName: '车辆管理',
							list: [
								// {
								// 	name: '车辆列表',
								// 	disabled: false,
								// 	path:'/admin/vehicle/list'
								// },
								{
									name: '车辆类型',
									disabled: false,
									path:'/admin/vehicle/type'
								},
							]
						}
					]
				},
				{
					title: '系统设置',
					icon: 'iconfont icon-setting',
					active: 'm4',
					children: [
						{
							itemName: '系统设置',
							list: [
								{
									name: '基本设置',
									disabled: false,
									path:'/admin/setting/basics'
								},
								{
									name: '小程序banner设置',
									disabled: false,
									path:'/admin/setting/wxbanner'
								},
								{
									name: '佣金设置',
									disabled: false,
									path:'/admin/setting/commission'
								},
								{
									name: '地区库',
									disabled: false,
									path:'/admin/setting/citylist'
								},
								{
									name: '管理员列表',
									disabled: false,
									path:'/admin/setting/uselist'
								},
								{
									name: '设备过滤列表',
									disabled: false,
									path:'/admin/setting/equipmentlist'
								},

							]
						}
					]
				}
			],
			isCollapse: false,
			headActiveIndex: "1",
			leftActiveIndex: "t0",
			topActiveIndex: '',
			dialogVisible: false,
			dialogVisible2: false,
			dialogVisible3: false,
			form: {
				curPass: '',
				newPass: '',
				againPass: ''
			},
			rules: {
				sourcepassword: [{
					required: true,
					message: '请填写当前使用的密码',
					trigger: 'blur'
				}],
				password: [{
					validator: password,
					trigger: 'blur'
				},
				{
					min: 6,
					max: 16,
					message: '长度在 6 到 16 个字符',
					trigger: 'blur'
				}
				],
				confirmpassword: [{
					validator: confirpwd,
					trigger: 'blur'
				},
				{
					min: 6,
					max: 16,
					message: '长度在 6 到 16 个字符',
					trigger: 'blur'
				}
				]
			},
			my: {
				id: 0,
				name: "",
				mobile: "",
				email: "",
				state: "",
				photo: "",
				departmentid: 0,
				departmentname: ""
			},
			remind:{
				pageIndex: 1,
				pageSize: 20
			},
			remindList: []
		}
	},
	watch: {
		theme_color(val) {
			localStorage.setItem('theme_color', val)
		},
		type_Setting(val) {
			localStorage.setItem('type_Setting', val)
		},
		// $route(to, from) {
		// 	let pagepath = to.path
		// 	console.log('to:',to)
		// 	this.leftActiveIndex = pagepath
		// }
	},
	created() {
		// if (process.client) {
			if (localStorage.getItem('theme_color')) {
				this.theme_color = localStorage.getItem('theme_color')
			}
			if (localStorage.getItem('type_Setting')) {
				this.type_Setting = localStorage.getItem('type_Setting')
			}
			if (localStorage.getItem("topActiveIndex")) {
				this.topActiveIndex = localStorage.getItem("topActiveIndex")
			}
			if (localStorage.getItem("leftActiveIndex")) {
				this.leftActiveIndex = localStorage.getItem("leftActiveIndex")
				// if(this.leftActiveIndex != '/bigdata/'){
				// 	this.$router.push({
				// 		path: this.leftActiveIndex
				// 	})
				// }
			}
			console.log('localStorage.getItem("lifeData"):',localStorage.getItem("lifeData"))
			if (localStorage.getItem("lifeData")) { //检查是否存在登录token
				this.$store.dispatch('setInitData', localStorage.getItem("lifeData"))
        		this.$store.dispatch('signalrConnection')
			}
		// }
	},
	mounted(){
		this.getReminList()
	},
	computed: {
		...mapState({
			adminInfo: state => state.userdetail,
			// webSetting: state => state.webSetting,
			remindCount: state => state.remindCount,
			loading: state => state.loading
		})
	},
	methods: {
		goRemind(){
			this.$router.push({
				path:'/remind/list'
			})
		},
		getReminList(){ //获取推送信息列表
			this.$axios.post('/Remind/List',this.remind).then((res) => {
				this.remindList = res.data
			})
		},
		headHandleSelect(key) {
			// console.log(key)
			if (key == 'myInfo') {
				this.getMydata()
				this.dialogVisible = true
			}
			if (key == 'modifyPwd') {
				this.dialogVisible2 = true
			}
			if (key == 'logout') {
				if (process.client) {
					localStorage.removeItem('lifeData')
					localStorage.removeItem('leftActiveIndex')
					localStorage.removeItem('topActiveIndex')
					
				}
				this.$router.push({
					path:'/admin/login'
				})
			}
		},
		leftHandleSelect(key) {
			// console.log(key)
			if (process.client) {
				localStorage.setItem('leftActiveIndex', key)
			}
			// let that = this
			// this.menu.forEach((item)=>{
			// 	item.children.forEach((cell)=>{
			// 		cell.list.forEach((c)=>{
			// 			if(c.index == key){
			// 				that.$router.push({
			// 					path: c.path
			// 				})
			// 			}
			// 		})
			// 	})
			// })
		},
		getMydata() {
			this.$axios.get('/admin/detail?id=' + this.adminInfo.id).then((res) => {
				this.my = res
			})
			// this.$axios.get('/admin/detail?id=' + '0').then((res) => {
			// 	this.my = res.data
			// })

		},
		onSubmit() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.$axios.post('/admin/Resetpass', this.form).then((res) => {
						this.$alert('密码修改成功, 请重新登录！', '提示', {
							confirmButtonText: '确定',
							showClose: false,
							callback: action => {
								if (process.client) {
									localStorage.removeItem('lifeData')
								}
								this.$router.push({
									path:'/login'
								})
							}
						});
					})
				} else {
					return false;
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.admin-nav {
	.admin-head-nav {
		.head-nav-flex {
			display: flex;
			border-bottom: solid 1px #e6e6e6;
			background-color: #fff;

			.el-menu {
				border-bottom: 0;
				display: flex;
				justify-content: flex-end;
			}

			.col {
				display: flex;
				padding-left: 15px;
			}

			.logo-box {
				display: flex;
				flex: 1;

				.logo {
					background-repeat: no-repeat;
					background-position: center;
					background-size: 80%;
					// background-color: #fff;
					width: 60px;
					height: 60px;
					box-sizing: border-box;
				}

				.title {
					display: flex;
					// height: 60px;
					align-items: center;
					padding: 0 50px 0 5px;
					font-size: 18px;
				}

				.version {
					font-size: 12px;
					color: var(--grey);
					padding-left: 10px;
				}
			}

			.icon-nemu {
				display: flex;
				align-items: center;

				.iconfont {
					font-size: 22px;
					margin-left: 30px;
					cursor: pointer;
				}
			}

			.col-auto {
				flex: 1;
			}
		}
	}

	.admin-content {
		display: flex;

		.admin-left-nav {
			background-color: #fff;
			border-right: solid 1px #e6e6e6;
			box-shadow: 0 0 16px 0 rgba(0, 0, 0, .04);
			// width: 220px;

			.el-menu {
				width: 220px;
				border-right: 0;
			}

			.collapse-btn {
				cursor: pointer;
				padding: 5px;
				background-color: var(--light);
				position: absolute;
				bottom: 10px;
				right: 18px;

				&:hover {
					background-color: var(--blue);
					color: #fff;
				}
			}

			.text-item {
				height: calc(100vh - 61px);

				::v-deep{
					.text-item-wrap {
						overflow-x: hidden;
					}
				}
			}

			.left-nav-title {
				line-height: 50px;
				padding: 0 15px;
				font-size: 16px;
				position: relative;
				border-bottom: 1px solid var(--light);
				width: 160px;
			}

			.left-nav-sub-title {
				font-weight: bold;
				color: #000;
				font-size: 14px;
				display: block;
				border-bottom: 1px solid var(--light);
				padding-bottom: 10px;
				margin-right: 20px;
			}

			.el-menu-item-group {
				margin-bottom: 15px;
			}

			.el-menu-vertical {
				border-right: 0;
			}

			.admin-left-head-nav {
				display: flex;
				flex-direction: column;

				.el-menu-item {
					text-align: center
				}
			}

			.e-icon{
				display: inline-block;
    			width: 25px;
			}
		}

		.container-page {
			flex: 1;
			min-width: 800px;

			.text-item {
				height: calc(100vh - 90px);
    			border-radius: 5px;
				::v-deep{
					.text-item-wrap {
						overflow-x: hidden !important;
					}
				}
			}
		}
	}

	.el-menu-vertical {
		.el-menu-item {
			font-size: 14px;
			line-height: 48px;
			height: 48px;
		}
	}

	.el-menu--collapse {
		width: 64px !important;
		text-align: center;
		height: calc(100vh - 100px);
		border-right: 0;

		.el-menu-item>div {
			padding: 0 13px !important;
		}
	}
}

// 待办事项
.todo-list {
	.item {
		display: flex;
		border-bottom: 1px solid var(--border-light);
		padding: 15px 0;

		&:last-child {
			border-bottom: 0;
		}

		.icon {
			width: 40px;
			height: 40px;
			color: #fff;
			background-color: var(--orange);
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 3px;
			margin-right: 10px;

			&.t1 {
				background-color: var(--orange)
			}

			&.t2 {
				background-color: var(--green)
			}

			&.t3 {
				background-color: var(--cyan)
			}

			&.t4 {
				background-color: var(--primary)
			}
		}

		.item-content {
			.tname {
				font-size: 14px;
			}

			.text {
				font-size: 14px;
				color: var(--dark);
				padding: 3px 0;
			}

			.date {
				font-size: 12px;
				color: var(--grey);
			}
		}
	}
}
/*菜单导航栏选中效果*/
.el-submenu.is-active.is-opened {
	.el-submenu__title {
		color: var(--grey);

		.iconfont {
			color: var(--grey);
		}

		.el-submenu__icon-arrow {
			color: var(--grey);
		}
	}
}
.el-menu-item.is-active{
	background-color: #f5f7fa;
	border-right: 2px solid var(--grey);
}
.admin-left-head-nav>.el-menu-item.is-active{
	background-color: #2e2e2e!important;
    color: #fff;
    border-right: 0;
}
.el-menu-item.is-active{
	color: var(--grey);
}
</style>
